<template>
  <div class="q-pa-md">
    <button @click="handleToggle">handleToggle visible {{ visible }}</button>
    <button @click="handleToggle2">handleToggle label {{ hideLabel }}</button>
    <div class="q-gutter-xs">
      <t-chips
        :visible="visible"
        :hideLabel="hideLabel"
        :label="'label'"
        :readonly="false"
        @remove="log('Icecream')"
        v-model="chipList"
        :dataSource="dataSource"
        label="label"
        :placeholder="'请选择或搜索标签'"
      >
      </t-chips>
      <br /><br /><br />

      <t-chips
        :readonly="false"
        @remove="log('Icecream')"
        color="primary"
        text-color="white"
        icon="cake"
        v-model="chipList"
        :dataSource="dataSource"
        label="label"
        :placeholder="'请选择或搜索标签'"
      >
      </t-chips>
      <t-chip
        @remove="log('Icecream')"
        color="teal"
        text-color="white"
        icon="cake"
      >
        Eclair
      </t-chip>
      <div>
        <t-btn
          color="primary"
          label="Reset"
          @click="onResetClick"
          class="q-mt-sm"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const visible = ref(true);
      const hideLabel = ref(false);

      const chipList = ref([
        { TagName: '标记未处理' },
        { TagName: 'tagName2' },
        { TagName: 'tagName3' },
        { TagName: 'tagName4' },
      ]);
      const dataSource = ref([
        { TagName: '标签1' },
        { TagName: '标签2' },
        { TagName: '标签3' },
      ]);
      const word = ref('word111');
      const icecream = ref(true);
      const eclair = ref(true);
      const cupcake = ref(true);
      const gingerbread = ref(true);
      return {
        visible,
        hideLabel,
        chipList,
        dataSource,
        word,
        icecream,
        eclair,
        cupcake,
        gingerbread,
        handleToggle() {
          visible.value = !visible.value;
        },
        handleToggle2() {
          hideLabel.value = !hideLabel.value;
        },
        handleSubmit(event) {
          console.log('submit', event);
        },
        handleInput(value) {
          console.log('input', value);
        },
        handleChange(value) {
          console.log('change', value);
        },
        onResetClick() {
          icecream.value = true;
          eclair.value = true;
          cupcake.value = true;
          gingerbread.value = true;
        },
        log(desert) {
          console.log(`${desert} has been removed`);
        },
      };
    },
  };
</script>
